<template>
  <div class="container">
    <div class="container-center">
      <design-left></design-left>
      <design-center :templateData="templateData"></design-center>
      <design-right></design-right>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import DesignLeft from '../components/DesignLeft.vue'
import { useRoute } from 'vue-router'
import { respDataBaseTemplate } from '@/api/types/database'
import DesignCenter from '../components/DesignCenter.vue'
import DesignRight from '../components/DesignRight.vue'

const route = useRoute()
const templateData = ref<Partial<respDataBaseTemplate>>({})
watchEffect(() => {
  templateData.value = route.query
})
</script>

<style scoped lang="scss">
.container {
  background-color: #f0f2f5;
  padding-top: 16px;

  .container-center {
    width: 1760px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    :deep(.con-wrap) {
      background-color: #fff;
      padding: 28px 20px;
      > h2 {
        font-size: 16px;
        color: #021429;
        font-weight: bold;
        margin-bottom: 20px;
      }
    }
  }
}
</style>
